import React, { Suspense } from 'react';
import { useRoutes } from 'react-router-dom';
import StatusView from '@/components/StatusView';
import routes from './router';
import { Badge, TabBar } from 'antd-mobile';


function App() {
  const tabs = [
    {
      key: 'home',
      title: 'chatbot',
      // icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: 'today',
      title: 'today',
      // icon: <UnorderedListOutline />,
      badge: '5',
    },
    {
      key: 'mine',
      title: 'mine',
      // icon: (active: boolean) =>
      //   active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
  ]
  return (<Suspense fallback={<StatusView status="loading" />}>
    <div className={'main-content'}>
      {useRoutes(routes)}
    </div>
    <TabBar>
    {tabs.map(item => (
      <TabBar.Item key={item.key} title={item.title} />
    ))}
    </TabBar>
  </Suspense>);
}

export default App;
